<template>
  <el-card>
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input v-model="input" placeholder="请输入" clearable ></el-input>
      </el-col>
      <el-button type="primary" :icon="Search">搜索</el-button>
      <el-button type="primary">添加用户</el-button>
    </el-row>
    <el-table :data="tableData" style="width: 100%" :border="true">
      <el-table-column prop="date" label="时间" width="180" />
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="address" label="地址" width="300"/>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import {Search} from '@element-plus/icons-vue'

const input = ref('')

const tableData = ref([
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]
)

</script>

<style lang="scss" scoped>
.header{
  padding-bottom: 16px;
  box-sizing: border-box;
}
</style>
